<template>
  <div class="aboutUser">
      <div class="aboutAuthor">关于作者</div>
      <div class="userInfo">
        <img :src="userDetail.url" alt="">
        <div class="userInfoRight">
          <span class="name">{{userDetail.nickname}}</span>
          <span class="descript">❤首席客服君 @ 掘金</span>
        </div>
      </div>
      <div class="previewNum">
          <span>获得点赞 5514</span>
          <span>文章被阅读 930050</span>
      </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    userDetail: {
      type: Object
    }
  },
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.aboutUser{
  background-color: #fff;
  margin-bottom: 2em;
  cursor: pointer;
  
  .aboutAuthor {
    padding: 1rem 1.3rem;
    font-size: 1.16rem;
    color: #333;
    border-bottom: 1px solid hsla(0,0%,58.8%,.1);
   
  }
  .userInfo {
    padding:  1rem 1.3rem 0;
    display: flex;
     &:hover {
      background-color: hsla(0,0%,85.1%,.1);
    }
    img {
      flex: 0 0 auto;
      width: 4.167rem;
      margin-right: 1rem;
      height: 4.167rem;
      border-radius: 50%;
    }
    .userInfoRight {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: space-between;
      height: 100%;
      .name {
        font-weight: 700;
        font-size: 1.2rem;
      }
      .descript {
        font-size: 1.1rem;
        padding-top: 13px;
        color: #72777b;
      }
    }
  }
  .previewNum {
     padding: 1.1rem 1.3rem 1.1rem;
    span {
      color: #000;
      font-size: 1.2rem;
      display: block;
    }
    span:last-child {
      margin-top: 1.2rem;

    }
  }
}
</style>